<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .page-size {
            list-style: none;
            display: flex;
        }

        .page-size>li {
            width: 40px;
            height: 40px;
            background: #dedede;
            text-align: center;
            line-height: 40px;
            margin-right: 10px;
            color: blue;
        }

        .page-size>li.active {
            background: #4a6ef1;
            color: white;
        }
    </style>
</head>

<body>
    <ul id="page" class="page-size">
        <!-- <li>1</li>
        <li class="active">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li> -->
    </ul>
    <ul id="page2" class="page-size"></ul>
    <script>
        let result = {
            pageNums: 10,
            currentPage: 6
        };
        let result2 = {
            pageNums: 20,
            currentPage: 8
        };
        //面向过程

        // let pageBox=document.getElementById("page");
        // for(let i=1;i<=result.pageNums;i++){
        //     let li=document.createElement("li");
        //     li.innerHTML=i;
        //     if(i==result.currentPage){
        //         li.classList.add("active");
        //     }
        //     pageBox.appendChild(li);
        // }
      


        //ES6中class构造函数，oop(面向对象：对实例的所有操作，应该被对应的构造器进行统一管理)
        class PageView {
            constructor(options = {}) {
                let pageBox = document.querySelector(options.el);
                for (let i = 1; i <= options.data.pageNums; i++) {
                    let li = document.createElement("li");
                    li.innerHTML = i;
                    if (i == options.data.currentPage) {
                        li.classList.add("active");
                    }
                    pageBox.appendChild(li);
                }
            }
        }

        let pageObj = new PageView({
            el: "#page",
            data: result
        });

        let pageObj2=new PageView({
            el:"#page2",
            data:result2
        });
    </script>
</body>

</html>